<script setup>
const props = defineProps({
    min: { type: Boolean, default: false }, //导航是否变小
    nav: { type: Array, default: [] }, //导航数据
    current: { type: String, default: "-1_-1" }, //默认索引
    topCurrent: { type: String, default: "-1" }, //页面顶部索引
});
const router = useRouter();

//导航点击
const navSelect = (key) => {
    const keys = key.split("_");
    let path = "";
    if (keys.length == 2) {
        path = props.nav[keys[1]].path;
    } else if (keys.length == 3) {
        path = props.nav[keys[1]].children[keys[2]].path;
    }
    router.push(path);
};
</script>

<template>
    <div>
        <el-menu class="left" :collapse="props.min" :default-active="props.current" @select="navSelect">
            <template v-for="(item, key) in props.nav" :key="props.topCurrent + '_' +key">
                <el-sub-menu :index="props.topCurrent + '_' + key"
                    v-if="!item.hidden && item.children && item.children.length > 0">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <template v-for="(itemChildren, key2) in item.children" :key="props.topCurrent + '_' +key+'_'+key2">
                        <el-menu-item v-if="!itemChildren.hidden" :index="props.topCurrent + '_' + key + '_' + key2">
                            {{ itemChildren.title }}
                        </el-menu-item>
                    </template>
                </el-sub-menu>
                <el-menu-item v-else-if="!item.hidden" :index="props.topCurrent + '_' + key">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <template #title>{{ item.title }}</template>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<style scoped lang="scss">
.left {
    border-right: none;
}
</style>
